import React from 'react';
import styles from './sectionDesigner.css'

class SectionDesigner extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            listPage: 1
        }
    }
    handlePagerChange(i){
        if (i < 1)
            i = 5;
        else if (i > 5)
            i = 1;
        this.setState({listPage: i})
    }
    render() {
        return (
            <section className={styles["section-designer"]}>
                <h2 className={"home-section-header"}>加盟设计师<span>Designers</span></h2>
                <ul className={"col" + this.state.listPage}>
                    <li>
                        <div className={styles["designer-info"]}>
                            <a href={"#"}>
                                <div className={styles["profile-image"]}><img src={"/static/home/home-performance.jpg"} alt={"设计师"} /></div>
                                <p>
                                    <span className={styles["name"]}>Test Name</span>
                                    <span  className={styles["description"]}>12 test test test test test  testtest test test test test  test test test test test test  testtest test test test test  test</span>
                                </p>
                            </a>
                            <button>关注</button>
                        </div>
                        <ul className={styles["designer-items"]}>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div className={styles["designer-info"]}>
                            <a href={"#"}>
                                <div className={styles["profile-image"]}><img src={"/static/home/lana.jpg"} alt={"设计师"} /></div>
                                <p>
                                    <span className={styles["name"]}>Test Name</span>
                                    <span  className={styles["description"]}>test test test test test  testtest test test test test  test</span>
                                </p>
                            </a>
                            <button>关注</button>
                        </div>
                        <ul className={styles["designer-items"]}>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div className={styles["designer-info"]}>
                            <a href={"#"}>
                                <div className={styles["profile-image"]}><img src={"/static/home/home-performance.jpg"} alt={"设计师"} /></div>
                                <p>
                                    <span className={styles["name"]}>333 Test Name</span>
                                    <span  className={styles["description"]}>test test test test test  testtest test test test test  test</span>
                                </p>
                            </a>
                            <button>关注</button>
                        </div>
                        <ul className={styles["designer-items"]}>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div className={styles["designer-info"]}>
                            <a href={"#"}>
                                <div className={styles["profile-image"]}><img src={"/static/home/lana.jpg"} alt={"设计师"} /></div>
                                <p>
                                    <span className={styles["name"]}>Test Name</span>
                                    <span  className={styles["description"]}>test test test test test  testtest test test test test  test</span>
                                </p>
                            </a>
                            <button>关注</button>
                        </div>
                        <ul className={styles["designer-items"]}>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div className={styles["designer-info"]}>
                            <a href={"#"}>
                                <div className={styles["profile-image"]}><img src={"/static/home/home-performance.jpg"} alt={"设计师"} /></div>
                                <p>
                                    <span className={styles["name"]}>4444 Test Name</span>
                                    <span  className={styles["description"]}>test test test test test  testtest test test test test  test</span>
                                </p>
                            </a>
                            <button>关注</button>
                        </div>
                        <ul className={styles["designer-items"]}>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div className={styles["designer-info"]}>
                            <a href={"#"}>
                                <div className={styles["profile-image"]}><img src={"/static/home/lana.jpg"} alt={"设计师"} /></div>
                                <p>
                                    <span className={styles["name"]}>Test Name</span>
                                    <span  className={styles["description"]}>test test test test test  testtest test test test test  test</span>
                                </p>
                            </a>
                            <button>关注</button>
                        </div>
                        <ul className={styles["designer-items"]}>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div className={styles["designer-info"]}>
                            <a href={"#"}>
                                <div className={styles["profile-image"]}><img src={"/static/home/home-performance.jpg"} alt={"设计师"} /></div>
                                <p>
                                    <span className={styles["name"]}>55555 Test Name</span>
                                    <span  className={styles["description"]}>test test test test test  testtest test test test test  test</span>
                                </p>
                            </a>
                            <button>关注</button>
                        </div>
                        <ul className={styles["designer-items"]}>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div className={styles["designer-info"]}>
                            <a href={"#"}>
                                <div className={styles["profile-image"]}><img src={"/static/home/lana.jpg"} alt={"设计师"} /></div>
                                <p>
                                    <span className={styles["name"]}>Test Name</span>
                                    <span  className={styles["description"]}>test test test test test  testtest test test test test  test</span>
                                </p>
                            </a>
                            <button>关注</button>
                        </div>
                        <ul className={styles["designer-items"]}>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div className={styles["designer-info"]}>
                            <a href={"#"}>
                                <div className={styles["profile-image"]}><img src={"/static/home/home-performance.jpg"} alt={"设计师"} /></div>
                                <p>
                                    <span className={styles["name"]}>Test Name</span>
                                    <span  className={styles["description"]}>test test test test test  testtest test test test test  test</span>
                                </p>
                            </a>
                            <button>关注</button>
                        </div>
                        <ul className={styles["designer-items"]}>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div className={styles["designer-info"]}>
                            <a href={"#"}>
                                <div className={styles["profile-image"]}><img src={"/static/home/lana.jpg"} alt={"设计师"} /></div>
                                <p>
                                    <span className={styles["name"]}>Test Name</span>
                                    <span  className={styles["description"]}>test test test test test  testtest test test test test  test</span>
                                </p>
                            </a>
                            <button>关注</button>
                        </div>
                        <ul className={styles["designer-items"]}>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                            <li>
                                <a href={"#"}><img src={"/static/home/home-print-drawings.jpg"} alt={"设计图"} /></a>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div className={styles.bottom}>
                    <ul className={styles.pager}>
                        <li>
                            <a onClick={this.handlePagerChange.bind(this, this.state.listPage - 1)}>
                                <svg viewBox="0 0 30 30">
                                    <path d="M26.519,0.878l1.678,2.909c0.276,0.479,0.112,1.091-0.367,1.368l-15.54,8.978c-0.668,0.386-0.668,1.349,0,1.735l15.543,8.98c0.479,0.277,0.643,0.889,0.367,1.368l-1.677,2.906c-0.279,0.484-0.9,0.646-1.379,0.36L2.155,15.817c-0.655-0.389-0.653-1.338,0.002-1.725L25.142,0.517C25.622,0.233,26.241,0.396,26.519,0.878z"/>
                                </svg>
                            </a>
                        </li>
                        <li>
                            <a className={styles["page-link"] + (this.state.listPage == 1 ? " active" : "")} onClick={this.handlePagerChange.bind(this, 1)}></a>
                        </li>
                        <li>
                            <a className={styles["page-link"] + (this.state.listPage == 2 ? " active" : "")} onClick={this.handlePagerChange.bind(this, 2)}></a>
                        </li>
                        <li>
                            <a className={styles["page-link"] + (this.state.listPage == 3 ? " active" : "")} onClick={this.handlePagerChange.bind(this, 3)}></a>
                        </li>
                        <li>
                            <a className={styles["page-link"] + (this.state.listPage == 4 ? " active" : "")} onClick={this.handlePagerChange.bind(this, 4)}></a>
                        </li>
                        <li>
                            <a className={styles["page-link"] + (this.state.listPage == 5 ? " active" : "")} onClick={this.handlePagerChange.bind(this, 5)}></a>
                        </li>
                        <li>
                            <a onClick={this.handlePagerChange.bind(this, this.state.listPage + 1)}>
                                <svg viewBox="0 0 30 30">
                                    <path d="M3.481,29.122l-1.678-2.909c-0.276-0.479-0.112-1.091,0.367-1.368l15.54-8.978c0.668-0.386,0.668-1.349,0-1.735L2.166,5.153C1.687,4.876,1.523,4.264,1.799,3.785l1.677-2.906c0.279-0.484,0.9-0.646,1.379-0.36l22.989,13.665c0.655,0.389,0.653,1.338-0.002,1.725L4.858,29.483C4.378,29.767,3.759,29.604,3.481,29.122z"/>
                                </svg>
                            </a>
                        </li>
                    </ul>
                    <p style={{textAlign:'center'}}>
                        我们诚意为设计师提供完善的销售及生产解决方案
                        <a href={"/become-designer"}>立即加盟</a>
                    </p>
                </div>
            </section>
        )
    }
}
export  default  SectionDesigner